<template>
  <div class="background">
    <el-form :model="ruleForm" status-icon ref="ruleForm" class="demo-ruleForm" :rules="rules" >
      <el-form-item prop="username">
        <el-input
          placeholder="请输入用户名"
          v-model="ruleForm.username"
          prefix-icon="el-icon-s-custom"
					
        ></el-input>
        <span v-if="!isCheckPhone" style="color:red">手机号已经被注册过了</span>
      </el-form-item>

      <el-form-item prop="nickName">
        <el-input
          placeholder="请输入昵称"
          v-model="ruleForm.nickName"
          prefix-icon="el-icon-shopping-cart-full"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item  prop="password">
            <el-input placeholder="请输入正确密码" type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
      </el-form-item>-->
      <el-form-item prop="password">
        <el-input
				 
          placeholder="请输入密码"
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
          prefix-icon="el-icon-lock"
        ></el-input>
      </el-form-item>

      <el-form-item style="height: 40px;margin-bottom: 20px;">
        <el-input
          class="input"
          maxlength="8"
          placeholder="请输入验证码"
          prefix-icon="el-icon-chat-dot-round"
          v-model='ruleForm.captcha_str'
        ></el-input>
        <div class="divIdentifyingCode" @click="getIdentifyingCode(true)">
          <img
            id="imgIdentifyingCode"
            style="height:40px; width: 100px; cursor: pointer;"
            alt="获取验证码"
            title="点击更换"
            src="../../assets/yz_03.png"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" class="zhuce">立即注册</el-button>
        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
      </el-form-item>
    </el-form>
    <p class="read">
      <input type="checkbox" />注册即代表阅读同意《用户服务协议》
    </p>
    <div class="pLogin">已有账号?
      <router-link to="login">
        <span>点击登录</span>
      </router-link>
    </div>
  </div>
</template>
<script>
// import {checkPhone,captcha,register} from "@/api/user"
import { regist } from '../../api/index'
export default {
  data() {
    // var checkCaptcha = (rule, value, callback) => {
    //   if (!value) {
    //     return callback(new Error('请输入验证码'));
    //   }else{
    //       callback();
    //   }
    // };
    var checkNickName = async (rule, value, callback) => {
      if (value === "") {
        return callback(new Error('请输入昵称'));
      }else{
          callback();
      }
    };
    // var validatePass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入正确密码'));
    //   } else {
    //     if (this.ruleForm.checkPass !== '') {
    //       this.$refs.ruleForm.validateField('checkPass');
    //     }
    //     callback();
    //   }
    // };
    // var validatePass2 = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请再次输入密码'));
    //   } else if (value !== this.ruleForm.password) {
    //     callback(new Error('两次输入密码不一致!'));
    //   } else {
    //     callback();
    //   }
    // };

    var checkPhone = async (rule, value, callback) => {
      var telStr = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else {
          if(telStr.test(value)){
              callback()
          }else{
               callback(new Error('请输入正确手机号'));
          }
      }
    };
    return {
      isCheckPhone: true,
      // time: 5,
      // isCapcha: false,
      ruleForm: {
				nickname:"",
        // password: '',
        username: '',
          captcha_str:""
      },
      rules: {
        // password: [
        //   { validator: validatePass, trigger: 'blur' }
        // ],
        // checkPass: [
        //   { validator: validatePass, trigger: 'blur' }
        // ],
        // captcha: [
        //   { validator: checkCaptcha, trigger: 'blur' }
        // ],
        username:[
            { validator: checkPhone, trigger: 'blur' }
        ],
        nickname:[
            { validator: checkNickName, trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
				console.log(this.$refs[formName],"ref");
        console.log(this.ruleForm)
        regist(this.ruleForm).then(res => {
          console.log(res)
          if (res.data.code === 10000) {
            this.$router.push('/login')
          }
        })
      
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getIdentifyingCode: function (bRefresh) {
      let identifyCodeSrc = this.$store.state.imgsrc+'kaptcha/render'
      if (bRefresh) {
        identifyCodeSrc = 'http://192.168.1.19:8080/yyyy.jpg'
        
          // this.$store.state.imgsrc+'kaptcha/render?' + Math.random()
      }
      let objs = document.getElementById('imgIdentifyingCode')
      objs.src = identifyCodeSrc
    },
  },
}
</script>
 
<style scoped>
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  /* z-index:-1; */
  /* position: absolute; */
  background: 	url(../../assets/bg.jpg);

}
.divIdentifyingCode {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  width: 102px; /*设置图片显示的宽*/
  height: 40px; /*图片显示的高*/
  background: #e2e2e2;
  margin-right: 14vw;
}
.el-input {
  margin-left: 12.5vw;
  border-radius: 30px;
  width: 73vw;
}
.el-button {
  width: 73vw;
  margin-left: 12.5vw;
}
.demo-ruleForm {
  /* z-index:1; */
  margin-top: 8vh;
}
.input {
  width: 47vw;
}
.read {
  /* margin-left: 14vw; */
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: center;
  align-items: center;
	color: #666;
}
.pLogin{
  margin-top: 2vh;
  margin-left: 50vw;
}
.pLogin span{
  font-size: 14px;
  color: rgb(0, 60, 255);
}
</style>
